import React from "react";

// function SonA (props) {
//   // 如果children是函数的话
//   // props.children()
//   return (
//     <>
//       {/* 如果children不是函数的话 */}
//       { props.children }
//     </>
//   )
// }

class SonA extends React.Component {
  render() {
    return (
      <>
        { this.props.children }
        {/* <button onClick={ () => { this.props.children() } }>点击</button> */}
      </>
    )
  }
}

// 函数组件
// function App () {
//   return (
//     <>
//       <SonA>
//         {/* 如果想要传函数，不能被其他标签包裹 */}
//         {/* { () => console.log('props.children') } */}
//         <div>
//           <p>
//             this is sonA 下面的 div 下面的 p
//           </p>
//         </div>
//       </SonA>
//     </>
//   )
// }

// 类组件
class App extends React.Component {
  render() {
    return (
      <>
        <SonA>
          {/* 如果想要传函数，不能被其他标签包裹 */}
          {/* { () => console.log('props.children') } */}
          <div>
            <p>
              this is sonA 下面的 div 下面的 p
            </p>
          </div>
        </SonA>
      </>
    )
  }
}

export default App;
